<template>
  <div class="allPage">
    <div>
      <el-form label-width="85px" :model="state.queryInfo" class="topForm">
        <div class="topQuery">
          <el-form-item label="探访者姓名">
            <el-input placeholder="请输入探访者姓名" v-model="state.queryInfo.visitName" clearable></el-input>
          </el-form-item>
          <el-form-item label="老人姓名">
            <el-input placeholder="请输入老人姓名" v-model="state.queryInfo.oldName" clearable></el-input>
          </el-form-item>
        </div>

        <div class="topButton">
          <el-form-item>
            <el-button class="purple" @click="search">查询</el-button>
            <el-button class="white" @click="reset">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div style="">
      <el-button class="purple" @click="handleAdd">新增</el-button>
    </div>
    <div>
      <el-table :data="state.tableData" border class="middleTable" :height="630" max-height="630">
        <el-table-column type="index" width="50" align="center" />
        <el-table-column prop="visitName" label="探访者姓名" width="150" align="center" />
        <el-table-column prop="oldName" label="老人姓名" width="150" align="center" />
        <el-table-column prop="relation" label="与老人关系" width="200" align="center" />
        <el-table-column prop="charged" label="嘱咐与意见" width="400" align="center" />
        <el-table-column prop="contact" label="联系方式" width="200" align="center" />
        <el-table-column prop="date" label="探访时间" width="200" align="center" >
          <template #="scope">
            <span>{{dateChange(scope.row.date)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F26A6A;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="ctm-el-pagination">
        <el-pagination :page-sizes="[10,20,50,100]" layout="slot, sizes, prev, pager, next,jumper" small :total="state.tableTotal" :page-size="state.queryInfo.size" @current-change="handleCurrentChange" @size-change="handleSizeChange">
          <span style="margin-right:10px;">共{{state.tableTotal}}条</span>
        </el-pagination>
      </div>
    </div>

    <!-- 抽屉 -->
    <div>
      <el-drawer v-model="state.drawer" size="50%"  :close-on-click-modal="false" @close="handleDrawerClose">
        <template #title>
          <div>
            <span v-if="state.status == 'add'">新增</span>
            <span v-if="state.status == 'edit'">编辑</span>
          </div>
        </template>
        <div>
          <el-form label-position="top" :model="state.saveForm" :rules="state.rules" ref="saveForm">
            <el-row>
              <el-col :xs="24" :sm="24" :md="7" :lg="7" :offset="1">
                <el-form-item label="探访者姓名" prop="visitName">
                  <el-input v-model="state.saveForm.visitName" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="7" :lg="7" :offset="1">
                <el-form-item label="联系方式">
                  <el-input v-model="state.saveForm.contact" @change="checkPhoneNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="7" :lg="7" :offset="1">
                <el-form-item label="老人姓名" prop="oldName">
                  <el-input v-model="state.saveForm.oldName" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="7" :lg="7" :offset="1">
                <el-form-item label="与老人关系">
                  <el-input v-model="state.saveForm.relation"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="7" :lg="7" :offset="1">
                <el-form-item label="嘱咐与意见">
                  <el-input v-model="state.saveForm.charged" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="7" :lg="7" :offset="1">
                <el-form-item label="探访时间">
                  <el-date-picker v-model="state.saveForm.date" type="date" placeholder="请选择探访日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="drawerBottomButton">
              <el-button class="white" @click="cancel">取消</el-button>
              <el-button class="purple" @click="handleSave">保存</el-button>
            </div>
          </el-form>
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive,onMounted,ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import axios from "axios"

const newForm = {
  id:undefined,
  visitName:undefined,
  oldName:undefined,
  relation:undefined,
  contact:undefined,
  date:undefined,
  charged:undefined,
}
export default defineComponent({
  setup() {
    const state = reactive({
      saveForm:{
        id:undefined,
        visitName:undefined,
        oldName:undefined,
        relation:undefined,
        contact:undefined,
        date:undefined,
        charged:undefined,
      },


      tableData:[
        // {id:'1',visitName:'zhangsan',oldName:'lisi',relation:'父子',charged:'留意老人添衣情况',contact:'13977778888',date:'2022-2-13',},
        // {id:'2',visitName:'zhangsan',oldName:'lisi',relation:'母子',charged:'留意老人添衣情况',contact:'13977778888',date:'2022-2-13',},
        // {id:'3',visitName:'zhangsan',oldName:'lisi',relation:'朋友',charged:'留意老人添衣情况，嘱咐老人多喝水',contact:'13977778888',date:'2022-2-13',},

      ],

      queryInfo:{
        size:20,//每页条数
        number:1,//页数
        visitName:undefined,
        oldName:undefined,
      },//查询条件
      tableTotal:0,//数据总条数
      status:'',//记录状态判断新增或编辑
      drawer:false,//抽屉开关
      rules:{
        visitName:[{required:true,message:'请输入探访者姓名',trigger: "blur",}],
        oldName:[{required:true,message:'请输入老人姓名',trigger: "blur",}],
      },//表单检验规则
    })
    const saveForm = ref()

    // 处理新增
    const handleAdd = () => {
      state.status = 'add'
      state.saveForm = {...newForm}
      
      state.drawer = true
    }
    // 处理编辑
    const handleEdit = (row) => {
      state.status = 'edit'
      state.saveForm = {...row}
      state.saveForm.date = dateChange(row.date)
      state.drawer = true
    }
    // 处理删除
    const handleDelete = (row) => {
      ElMessageBox.confirm('确定删除吗?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning',
      }).then(() => {
          axios({
            method:'get',
            url:'http://127.0.0.1:13520/api/visitmanagement/delVisitManagement',
            params:{
              id:row.id
            }
          }).then(res=>{
            if(res.data == 'success'){
              ElMessage({
                message: '删除成功',
                type: "success",
              });
              queryAll()
            }else{
              ElMessage({
                message: '删除失败',
                type: "error",
              });
            }
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消删除',
          })
        })
    }
    // 条件查询
    const search = () => {
      // axios({
      //   method:'get',
      //   url:'http://127.0.0.1:13520/api/visitmanagement/getConditionVisitManagement',
      //   params:{...state.queryInfo}
      // }).then(res=>{
      //   state.tableData = res.data
      // }).catch(err=>{
      //   console.log(err);
      // })
      queryAll()
    }
    // 查询所有
    const queryAll = () => {
      axios({
        method:'get',
        url:'http://127.0.0.1:13520/api/visitmanagement/getAllVisitManagement',
        params:{...state.queryInfo}
      }).then(res=>{
        state.tableData = res.data.data
        state.tableTotal = res.data.total 
      }).catch(err=>{
        console.log(err);
      })
    }
    // 重置
    const reset = () => {
      state.queryInfo.visitName = ''
      state.queryInfo.oldName = ''
      queryAll()
    }
    // 抽屉关闭前的回调
    const handleDrawerClose = () => {
      saveForm.value.resetFields()
    }
    // 检验输入的联系方式
    const checkPhoneNumber = () => {
      const regex = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      let bool = regex.test(state.saveForm.contact);
      if(bool == false){
        state.saveForm.contact = ''
      }else{
        return state.saveForm.contact
      }
    }
    // 处理取消
    const cancel = () => {
      state.saveForm = {...newForm}
      saveForm.value.resetFields()
      state.drawer = false
    }
    // 处理保存
    const handleSave = () => {
      saveForm.value.validate((valid)=>{
        if(valid){
          if(state.status == 'add'){
            axios({
              method:'post',
              url:'http://127.0.0.1:13520/api/visitmanagement/addVisitManagement',
              params:{...state.saveForm}
            })
            .then((res)=>{
              if(res.data == 'success'){
                ElMessage({
                  message: '保存成功',
                  type: "success",
                });
                state.drawer = false
                queryAll()
              }else{
                ElMessage({
                  message: '保存失败',
                  type: "success",
                });
              }
            })
          }else{
            axios({
              method:'post',
              url:'http://127.0.0.1:13520/api/visitmanagement/editVisitManagement',
              params:{...state.saveForm}
            })
            .then((res)=>{
              if(res.data == 'success'){
                ElMessage({
                  message: '保存成功',
                  type: "success",
                });
                state.drawer = false
                queryAll()
              }else{
                ElMessage({
                  message: '保存失败',
                  type: "success",
                });
              }
            })
          }
        }
      })
    }
    // 日期转换
    const dateChange = (date) => {
      if(date){
        let datetime = new Date(date)
        let Y = datetime.getFullYear() + '-'
        let M = (datetime.getMonth() + 1 < 10 ? ('0' + (datetime.getMonth() + 1)) : datetime.getMonth() + 1) + '-'
        let D = (datetime.getDate() + 1 < 10 ? '0' + datetime.getDate() : datetime.getDate()) + ''
        return Y + M + D
      }
    }
    onMounted(() => {
      queryAll();
    })
    const handleCurrentChange = (newPage: number) => {
      state.queryInfo.number = newPage;
      queryAll();
    };
    const handleSizeChange = (newSize: number) => {
      state.queryInfo.size = newSize;
      queryAll();
    };
    return {
      state,
      handleCurrentChange,
      handleSizeChange,
      handleAdd,
      handleEdit,
      handleDelete,
      saveForm,
      cancel,
      handleSave,
      handleDrawerClose,
      checkPhoneNumber,
      search,
      reset,
      dateChange,
    }
  },
})
</script>
<style lang="scss" scoped>
.allPage{
  padding:10px
}
.topForm{
  display:flex;justify-content:space-between;
}
.topQuery{ 
  display:flex;justify-content:flex-start;margin-top:8px;
}
.topButton{
  margin-right:20px;margin-top:10px;
}
.middleTable{
  width: 100%;border-radius:10px;margin-top:20px;
}
// 紫色按钮样式
:deep(.purple) {
  background: -webkit-gradient(
    linear,
    100% 0%,
    0% 0%,
    from(#9483ae),
    to(#bd9cdb)
  );
  border-radius: 20px;
  color: #fff;
  width: 80px;
}
:deep(.el-scrollbar__thumb){
  transform:none !important;
}
:deep(.white){
  border-radius: 20px;
  width: 80px;
}
:deep(.el-drawer__body){
  border-top: 1px solid #ccc;
}
:deep(.el-input__icon){
  margin-top: 8px;
}
:deep(.el-input){
  width: 100%;
}
:deep(.el-input-number){
  width: 100%;
}
.drawerBottomButton{
  position: absolute;
  bottom: 30px;
  right: 30px;
}
</style>
